<template>
  <div class="index">
    <expert-com :list="list" :type="type"></expert-com>
    <div class="evalua">
      <h3> <span>技术水平:</span>  <van-rate color="#EE4533" v-model="skill" /></h3>
      <h3> <span>服务态度:</span>  <van-rate color="#EE4533" v-model="service" /></h3>
      <van-field
        v-model="message"
        rows="3"
        autosize
        label=""
        class="field"
        type="textarea"
        placeholder="请输入对专家的评价内容"
      />
      <van-button type="info" class="btn" block @click="postEvalute">发布</van-button>
    </div>
  </div>
</template>

<script>
import { Rate, Field, Button, Toast } from 'vant'
import expertCom from '../components/response/index'
import API from '@/services/index'
export default {
	name: 'index',
	components: {
		expertCom,
		VanRate: Rate,
		VanField: Field,
		VanButton: Button,
	},
	data() {
		return {
			skill: 0,
			service: 0,
			message: '',
			list: {},
			type: 'online',
		}
	},
	created() {
		this.getMyService()
	},
	methods: {
		async getMyService() {
			const data = await API.getMyService({
				params: {
					type: this.$route.params.type,
				},
			})
			console.log(data)
			this.list = data.find(el => el.id === this.$route.params.id)
		},
		async postEvalute() {
			var obj = {
				commtent: this.message,
				expertId: this.list.expertId,
				serveStar: this.service,
				skillStar: this.skill,
				sourceId: this.$route.params.id,
			}
			if (obj.commtent.trim() === '') {
				Toast.fail('评价内容不能为空')
				return
			}
			const data = await API.postEvaluate({
				data: obj,
			})
			console.log(data) 
			if (data === '评价成功') {
				Toast.success('提交成功')
			} else {
				Toast.fail('提交失败')
			}
			setTimeout(() => {
				this.$router.go(-1)
			}, 500)
		},
	},
}
</script>

<style lang='scss' scoped>
.index {
    .evalua {
		h3 {
			margin: 8px 0;
			height: 24px;
			overflow: hidden;
			display: flex;
			align-self: center;
			span {
				margin-right: 10px;
				line-height: 24px;
				font-weight: 100;
			}
		}
        .field {
            background-color: rgba(236, 236, 236, 0.842);
        }
        .btn {
			width: calc( 100% - 32px);
			position: absolute;
			// margin-top: 30px;
			bottom: 16px;
        }
    }
}
</style>
